<template>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header"><i class="fa fa-won"></i>  账户贷款</div>
        <div class="layui-card-body">
            <el-steps :active="active" finish-status="success" style="margin:20px 20px 0px 20px;">
              <el-step title="填写基本信息"></el-step>
              <el-step title="信用审评"></el-step>
              <el-step title="提交贷款申请"></el-step>
            </el-steps>
            <!-- style="display:none;" -->
             <el-form ref="form" :model="form" label-width="120px" v-show="loanInfoCard" style="position:relative;top:60px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);text-align:center;padding:10px 20px 20px 0px;">
                    <span style="margin-top:30px;display:inline-block;">贷款信息填写</span>
                    <el-form-item label="贷款人" style="padding-top:50px;">
                      <el-input v-model="form.name" placeholder="请填写贷款人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="贷款人身份证">
                      <el-input v-model="form.uid" maxlength="18" placeholder="请填写18位贷款人身份证" oninput = "value=value.replace(/[^\d]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="贷款人还款账户">
                      <el-input v-model="form.accountUid" maxlength="18" placeholder="请填写18位贷款人还款账户" oninput = "value=value.replace(/[^\d]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="贷款金额">
                      <el-select v-model="form.loanBalance" placeholder="请选择贷款金额级别" style="float:left;">
                        <el-option label="1000￥" value="1000"></el-option>
                        <el-option label="5000￥" value="5000"></el-option>
                        <el-option label="10000￥" value="10000"></el-option>
                        <el-option label="20000￥" value="20000"></el-option>
                        <el-option label="50000￥" value="50000"></el-option>
                      </el-select>
                    </el-form-item>
                    
                    <el-form-item label="贷款期限">
                      <el-radio-group v-model="form.loanTime" style="float:left;margin-top:13px;">
                        <el-radio label="1个月"></el-radio>
                        <el-radio label="5个月"></el-radio>
                        <el-radio label="12个月"></el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="贷款用途描述">
                      <el-input type="textarea" v-model="form.loanPurpost"></el-input>
                    </el-form-item>
                    <el-form-item>
                     <el-button type="primary" @click="queryCredit" style="float:right;">下一步</el-button>
                    </el-form-item>
                  </el-form>
                  <el-card class="box-card" v-show="loanCreditCard" style="display:none;margin-top:100px;padding-bottom:30px;position:relative;left:50px;">
                      <span>{{form.name}}贷款信用审批评级结果</span>
                      <el-rate
                        v-model="value"
                        disabled
                        show-text
                        :colors="colors"
                        :texts="['极差','差','一般','好','极好']">
                      </el-rate>
                      <el-button type="primary" @click="onSubmit" style="float:right;">提交贷款申请</el-button>
                  </el-card>
                  <!--提交贷款审批-->
                  <el-card class="box-card" v-show="loanPassCard" style="display:none;margin-top:100px;padding-bottom:30px;margin:20px auto;">
                      <div style="height: 300px;transform: translateX(50%);margin-left:-95px;">
                        <el-steps direction="vertical" :active="1">
                          <el-step title="贷款请求正在审理中"></el-step>
                          <el-step title="贷款审批通过" description="需要管理员进行审批，审批通过进行放款"></el-step>
                          <el-step title="银行自动放款"></el-step>
                        </el-steps>
                      </div>
                      <el-button type="primary" @click="next" style="float:right;">返回重新进行贷款处理</el-button>
                  </el-card>
            <!-- <el-button style="margin-top: 12px;" @click="next"></el-button> -->
        </div>
      </div>   
    </div>
</template>
<script>
import Qs from 'qs'
export default {
    inject:['reload'],
    data() {
      return {
        loanInfoCard:true,//贷款信息卡片是否呈现
        loanCreditCard:false,//信用界别卡片是否呈现
        loanPassCard:false,//贷款审批卡片是否呈现
        active: 1,
        form: {
          name: '',//贷款人姓名
          uid:'',//贷款人身份证
          loanBalance: '',//贷款金额
          loanTime: '',//贷款期限
          accountUid:'',//还款账户
          loanPurpost:''//贷款用途
        },
        value: 0,//信用级别
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],//评分颜色
      }
    },
    methods: {
      next() {
        if (this.active++ > 3){
            this.reload();
            this.active = 1;
        }
      },
      queryCredit() {//查询信用级别
        var Uidregix=/^[\d]{18}$/;//身份证
        if(!this.form.uid.match(Uidregix)||!this.form.accountUid.match(Uidregix)){
            this.$message.error("身份证或还款账户必须为18位");
        }else if(this.form.uid.trim()==""||this.form.accountUid.trim()==""||this.form.name.trim()==''||this.form.loanBalance==''||this.form.loanTime==''||this.form.loanPurpost==''){
            this.$message.error("贷款信息没有填写完整");
        }else{
            this.loanInfoCard=false;//信用界面显现 
            this.loanCreditCard=true;
            var data=Qs.stringify({
              "uid":this.form.uid,
              "name":this.form.name,
              "accountUid":this.form.accountUid
              });
            this.$axios
            .post('/bk-user/queryCreditByUid',
                    data,
                    {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
                if(result.data.code==200){
                    this.value=result.data.data[0].creditLevel;
                    if (this.active++ > 3){
                        this.active = 1; 
                    }
                }else if(result.data.code==400){
                    this.$message.error(result.data.message);
                    this.reload();
                }
            })
            .catch(failResponse => {
                
            })
        }
      },
      onSubmit() {
        if(this.value<3){
          this.$message.warning('您当前信用级别太低,不能进行贷款申请');
          this.reload();
        }
        if (this.active++ > 3){
            this.active = 1;
        }
        this.loanCreditCard=false;//贷款审批级别
        this.loanPassCard=true;
        var data=Qs.stringify(this.form);
        this.$axios
        .post('/bk-user/approvalLoan',//记录审批贷款
                data,
                {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
        )
        .then(result => {
            if(result.data.code==200){
                if (this.active++ > 3){
                    this.active = 1; 
                }
                this.$message.success(result.data.data.vo+"贷款账户已生成");
            }else if(result.data.code==400){
                this.$message.error(result.data.message);
                this.reload();
            }
        })
        .catch(failResponse => {
            
        })
      }
    }
  }
</script>
<style>
.text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 90%;
  }
</style>
